<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { NInput, NFlex, NButton, useMessage } from 'naive-ui'

const serverAddress = ref<string>('http://127.0.0.1:8085/api')

const description = ref<string>('')

const emits = defineEmits(['connected'])

const message = useMessage()

const connectServer = () => {
    if (description.value === '') {
        message.warning('项目备注不能为空')
        return
    }
    emits('connected', { description: description.value, serverAddress: serverAddress.value })
}
</script>
<template>
    <n-flex justify="space-between">
        <n-input
            v-model:value="description"
            class="input-server"
            placeholder="请输入项目备注"
        ></n-input>
        <n-input
            v-model:value="serverAddress"
            class="input-server"
            placeholder="请输入服务器地址:<http://127.0.0.1:8085/api>"
        ></n-input>
        <n-button class="button" @click="connectServer">连接</n-button>
    </n-flex>
</template>

<style scoped>
.input-server {
    width: 80%;
}
.button {
    width: 15%;
}
</style>
